<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/css/login.css}">
    <th:block th:insert="~{common/header::head}"></th:block>

    <title>登录-云沾衣诗词网-入云深处亦沾衣</title>
</head>
<body>
<main class="form-signin">
    <div style="text-align: center">
        <a href="/">
            <img class="mb-4" style="width: 160px;height: 60px;" th:src="@{/img/main_logo_white.png}"/>
        </a>
    </div>

    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#login">登录</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#register">注册</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="login" class="container tab-pane active">
            <br>
            <div class="form-floating">
                <input type="text" class="form-control" id="floatingAccount" placeholder="手机号/邮箱">
                <label for="floatingAccount">账号</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingLoginPassword" placeholder="密码">
                <label for="floatingLoginPassword">密码</label>
            </div>
            <button id="loginBtn" class="w-100 btn btn-lg btn-primary" type="button" onclick="login(true);">
                <span id="loginLoading" hidden class="spinner-border spinner-border-sm"></span>
                登录
            </button>
        </div>
        <div id="register" class="container tab-pane fade"><br>
            <div class="form-floating">
                <input type="text" class="form-control" id="floatingPhone" placeholder="手机号">
                <label for="floatingPhone">手机号</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingRegisterPassword" placeholder="密码">
                <label for="floatingRegisterPassword">密码</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingRePassword" placeholder="确认密码">
                <label for="floatingRePassword">确认密码</label>
            </div>
            <button class="w-100 btn btn-lg btn-primary" onclick="registerAccount();" type="button">注册</button>
        </div>
    </div>
</main>
<!-- 模态框 -->
<div class="modal fade" id="logoutModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h3 class="modal-title">退出登录</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                登录要退出已登录账号,确定要退出登录吗?
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-bs-dismiss="modal" onclick="function home() {document.location.href='/'}
                home()">回到首页
                </button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="logout()">退出登录</button>
            </div>

        </div>
    </div>
</div>

</body>
<th:block th:insert="~{common/footer::tail}"></th:block>

<script>

    //获取cookie方法，封装一个方法getCookies(),传入一个属性参数，可以获取对应的属性值
    function getCookies(name) {
        const str = document.cookie;    //获取所有的cookie，得到的是一个字符串
        const arr = str.split("; "); //注意：分号后面有一个空格
        for (let i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split("=")
            if (arr2[0] == name) {
                return arr2[1]
            }
        }
    }

    window.onload = function () {
        if (getCookies('token') !== undefined) {
            showLogoutModel()
        }
    }
</script>
</html>
